import React, { Fragment } from 'react'
import { StyleSheet, ScrollView, View, Text, ImageBackground, InteractionManager } from 'react-native'
import moment from 'moment'
import BasePage from 'src/pageP/base/base-page/index'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import CustomImage from 'src/components/image/CustomImage'
import Title from './components/Title'
import PrivilegeCell from './components/PrivilegeCell'
import PrivilegeVertical from './components/PrivilegeVertical'
import PrivilegeHorizontal from './components/PrivilegeHorizontal'
import { companyDefaultLogo } from 'src/utils/ConfigUtil'
import { ShowLoading, DismissLoading } from 'src/utils/ToastUtil'
import { getMemberTypeList } from 'src/utils/RequestAPI'
import { ScaleS, ScaleT, NAVIGATIONBAR_HEIGHT } from 'src/utils/ScreenUtil'
import { connect } from 'react-redux'
import { UPDATE_USERINFO_ACTION } from '@store/actions/userinfo'
import { UPDATE_MAIN_PAGE_B_ACTION } from 'src/pageB/main/main-page/store/action'
import { isEmptyObjectFn } from 'src/utils/JSTypeUtil'
import DefaultImage from 'src/components/image/DefaultImage'
const PrivilegeStatic3 = [
  {
    key: 'publicTweet',
    title: '公众号推文',
    value: '推荐',
    imgUri: require('@/imgC/member/privilege7.png')
  },
  {
    key: 'firstAudit',
    title: '优先审核',
    value: '提供',
    imgUri: require('@/imgC/member/privilege8.png')
  }
]
const PrivilegeStatic2 = [
  {
    key: 'operator',
    title: '招聘专员',
    imgUri: require('@/imgC/member/privilege4.png')
  },
  {
    key: 'IntelligentPush',
    title: '智能推送',
    value: '无限',
    imgUri: require('@/imgC/member/privilege5.png')
  },
  {
    key: 'talentTalk',
    title: '人才沟通',
    value: '无限',
    imgUri: require('@/imgC/member/privilege6.png')
  }
]
const PrivilegeStatic1 = [
  {
    key: 'postPublishPrice',
    title: '岗位发布',
    value: '会员免费发布',
    imgUri: require('@/imgC/member/privilege1.png')
  },
  {
    key: 'postAddress',
    title: '工作地点',
    imgUri: require('@/imgC/member/privilege2.png')
  },
  {
    key: 'postTop',
    title: '岗位置顶',
    value: '使用',
    imgUri: require('@/imgC/member/privilege3.png')
  }
]
// 发送行为
const mapDispatchToProps = dispatch => ({
  updateMainPageB (payload) {
    dispatch(UPDATE_MAIN_PAGE_B_ACTION(payload))
  }
})

@connect(
  ({ userinfo, BMineCenterStore }) => ({
    userinfo,
    ...BMineCenterStore
  }),
  mapDispatchToProps
)
class BMemberDetail extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: {},
      visible: false,
      currentMemberType: '会员',
      PrivilegeDataSource1: [],
      PrivilegeDataSource2: [],
      PrivilegeDataSource3: []
    }
  }

  componentDidMount () {
    InteractionManager.runAfterInteractions(() => {
      ShowLoading()
      getMemberTypeList({}).then(res => {
        let dataSource = res.data
        if (dataSource && !isEmptyObjectFn(dataSource)) {
          const { member: { memberType: currentMemberType } } = this.props
          dataSource = dataSource.filter(e => e.code === currentMemberType)
          if (dataSource[0]) {
            this.setState({
              currentMemberType: dataSource[0].name
            })
          }
          const PrivilegeDataSource1 = PrivilegeStatic1.map(e => {
            dataSource.forEach(f => {
              if (!e.value && f.code === currentMemberType) {
                e.value = f[e.key]
              }
            })
            return e
          })
          const PrivilegeDataSource2 = PrivilegeStatic2.map(e => {
            dataSource.forEach(f => {
              if (!e.value && f.code === currentMemberType) {
                e.value = f[e.key]
              }
            })
            return e
          })
          const PrivilegeDataSource3 = [...PrivilegeStatic3]
          this.setState({
            PrivilegeDataSource1,
            PrivilegeDataSource2,
            PrivilegeDataSource3
          })
        }
      }).finally(() => {
        DismissLoading()
      })
    })
  }

  renderNavigationBarChild () {
    return <Text style={styles.naviTitle}>会员详情</Text>
  }

  childRender () {
    const { currentMemberType, PrivilegeDataSource1, PrivilegeDataSource2, PrivilegeDataSource3 } = this.state
    const { member: { remainingDay }, company: { simpleName, companyName, companyLogo } } = this.props
    return (
      <Fragment>
        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}
        >
          <CustomBoxShadow style={styles.companyCard}>
            <View style={styles.cardTopWrap}>
              <View style={styles.txtWrap}>
                <Text style={styles.companyName}>{simpleName || companyName}</Text>
                <Text style={styles.memberUpSlogen}>*会员招聘效率提高90%</Text>
              </View>
              <DefaultImage style={styles.companyLogo} source={{ uri: companyLogo }} defaultSource={companyDefaultLogo}/>
            </View>
            <View style={styles.memberStatus} >
              <ImageBackground style={styles.crownBG} source={require('@/imgC/member/circular.png')}>
                <CustomImage style={styles.crown} source={require('@/imgC/member/crown.png')}/>
              </ImageBackground>
              <View style={styles.statusWrap}>
                <Text style={styles.memberName}>{currentMemberType}</Text>
                <Text style={styles.memberRemaining}>有效期至：{moment().add(remainingDay, 'days').format('YYYY/MM/DD')}</Text>
              </View>
              {/* <CustomButton style={styles.renewBtn}>
                <Text style={styles.renewText}>去续费</Text>
                <CustomImage source={require('@/imgC/member/arrow.png')}/>
              </CustomButton> */}
            </View>
          </CustomBoxShadow>
          <Title title="可享特权"/>
          {PrivilegeDataSource1.map((item, index) =>
            <PrivilegeCell {...item} key={`PrivilegeCell${index}`} style={(index === 0 && { marginTop: 0 }) || null}/>
          )}
          <Title title="其他特权"/>
          <View style={styles.Privilege2Wrap}>
            {PrivilegeDataSource2.map((item, index) =>
              <PrivilegeVertical {...item} key={`PrivilegeVertical${index}`} />
            )}
          </View>
          <View style={styles.Privilege3Wrap}>
            {PrivilegeDataSource3.map((item, index) =>
              <PrivilegeHorizontal {...item} key={`PrivilegeHorizontal${index}`} />
            )}
          </View>
        </ScrollView>
      </Fragment>
    )
  }

  bottomBtnClick = () => {
    console.log('bottomBtnClick')
    this.toggleModal(true)
  }

  onConfirmModal = index => {
    console.log('onConfirmModal', index)
    // this.toggleModal(false)
  }

  onCancelModal = () => {
    console.log('onCancelModal')
    this.toggleModal(false)
  }

  onModalHideModal = res => {

  }

  toggleModal = modalVisible => {
    this.setState({
      modalVisible
    })
  }
}

export default BMemberDetail

const styles = StyleSheet.create({
  naviTitle: {
    fontSize: ScaleT(17),
    color: '#030303',
    fontWeight: '400'
  },
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF'
  },
  contentContainer: {
    position: 'relative',
    alignItems: 'center'
  },
  companyCard: {
    marginTop: ScaleS(20),
    padding: ScaleS(20),
    paddingBottom: ScaleS(18),
    width: ScaleS(335),
    backgroundColor: '#FFFFFF',
    shadowRadius: ScaleS(70),
    shadowOpacity: 0.51,
    shadowColor: '#D7D9DF',
    shadowOffset: {
      width: 0,
      height: ScaleS(4)
    },
    borderRadius: ScaleS(10)
  },
  cardTopWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  txtWrap: {
    width: ScaleS(182)
  },
  companyName: {
    fontSize: ScaleT(21),
    lineHeight: ScaleS(34),
    color: '#000000',
    fontWeight: '500'
  },
  memberUpSlogen: {
    marginTop: ScaleS(10),
    fontSize: ScaleT(11),
    lineHeight: ScaleS(18),
    color: '#C59850',
    fontWeight: '400'
  },
  companyLogo: {
    width: ScaleS(70),
    height: ScaleS(70),
    borderStyle: 'solid',
    borderColor: '#E3E3E3',
    borderWidth: ScaleS(1),
    borderRadius: ScaleS(35)
  },
  memberStatus: {
    marginTop: ScaleS(14),
    width: ScaleS(295),
    height: ScaleS(56),
    borderRadius: ScaleS(28),
    backgroundColor: '#444444',
    flexDirection: 'row',
    alignItems: 'center'
  },
  crownBG: {
    marginLeft: ScaleS(4),
    width: ScaleS(42),
    height: ScaleS(42),
    borderRadius: ScaleS(21),
    justifyContent: 'center',
    alignItems: 'center'
  },
  crown: {
    // marginLeft: ScaleS(13)
  },
  statusWrap: {
    marginLeft: ScaleS(13),
    flex: 1
  },
  memberName: {
    fontSize: ScaleT(14),
    lineHeight: ScaleS(24),
    color: '#ffffff',
    fontWeight: '500'
  },
  memberRemaining: {
    fontSize: ScaleT(10),
    lineHeight: ScaleS(15),
    color: '#eeeeee',
    fontWeight: '400'
  },
  renewBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: ScaleS(14)
  },
  renewText: {
    marginRight: ScaleS(5),
    fontSize: ScaleT(14),
    color: '#ffffff',
    fontWeight: '500'
  },
  Privilege2Wrap: {
    flexDirection: 'row',
    justifyContent: 'center'
  },
  Privilege3Wrap: {
    marginVertical: ScaleS(18),
    flexDirection: 'row',
    justifyContent: 'center'
  }
})
